<template>
	<div class="noctice">
		<div class="n-notice-box">
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-left">
						<div class="n-title">
							通知公告
						</div>
						<div class="n-nav-item">
							<notice-player></notice-player>
						</div>
					</div>
				</el-col>
				<el-col :span="18">
					<div class="grid-right">
						<p class="n-content-title">{{noticeObj.title}}</p>
						<div class="n-split">
							<el-row>
								<el-col :span="8">
									<div class="split-content">时间：{{createTime | formatDate}}</div>
								</el-col>
								<el-col :span="8">
									<div class="split-content"></div>来源：本网</el-col>
								<el-col :span="8">
									<div class="split-content"></div>
								</el-col>
							</el-row>
						</div>
						<div class="n-content-value" v-html="noticeObj.content">
							{{noticeObj.content}}
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>

</template>

<script>
	import { mapMutations, mapState } from 'vuex'
	import { subjectDetail, subjectList } from '/api/index.js'
	import noticePlayer from '/components/noticePlayer'
  	import {formatDate} from '/api/date.js';
	export default {
    metaInfo: {
      title: '无忧账号-最新公告-账号交易首选无忧-账号找回永久包赔-所售账号不转手永久包赔', // set a title
      meta: [{                 // set meta
        name: 'keywords',
        content: '5u，5u账号，5u258，5u游戏，游戏账号交易，无忧账号，游戏帐号交易平台,5u258交易平台，5u258官网，王者荣耀，CF枪战之王，火影忍者，QQ飞车手游，和平精英，穿越火线，英雄联盟，逆战，霸气玩，租号玩，买卖账号'
      },{                 // set meta
        name: 'description',
        content: '无忧账号,是国内专业安全的游戏帐号交易平台，账号找回永久包赔，所售账号不转手永久包赔。玩家可以通过极其优惠的价格购买王者荣耀，CF枪战之王，火影忍者，QQ飞车手游，和平精英，穿越火线，英雄联盟，逆战等游戏的极品号。'
      }]
    },
		data() {
			return {
				noticeObj : {},
				createTime:'0000000000000'
			}
		},
		computed: {
			...mapState(['navIndex'])
		},
		mounted() {
			this.CHANGE_NAV(6);
			var paramObj = this.$route.params.paramObj;
			if(paramObj){
				this.getNoticeData(paramObj);
			}else{
				this.getDefaultNotice();	//刷新或直接点击菜单进入
			}
		},
		methods: {
			...mapMutations(['CHANGE_NAV']),
			getDefaultNotice() {
				subjectList({
					pageNum: 1,
					pageSize: 20
				}).then(res => {
					if(res.success === false) {
						this.error = true
						return;
					}
					var obj = res.data[0];
					if(obj){
						var paramObj = {id:obj.id}
						this.getNoticeData(paramObj);
					}
				}).catch((e) => {
					console.log(e)
				});
			},
			getNoticeData(paramObj){
				subjectDetail({
					id: paramObj.id,
				}).then(res => {
					if(res.success === false) {
						this.error = true
						return;
					}
					this.noticeObj = res.data;
					this.createTime = res.data.createTime;
				}).catch((e) => {
					console.log(e)
				});
			}
		},
		filters: {
			formatDate(time) {
		        var date = new Date(time);
		        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
		    }
		},
		components: {
			noticePlayer
		}
	}
</script>

<style lang="scss" rel="stylesheet/scss">
	.n-notice-box {
		clear: both;
		width: 1200px;
		min-height: 600px;
		height: auto;
		padding: 0 0 25px;
		margin: 80px auto;
	}

	.n-title {
		width: 100%;
		height: 50px;
		padding-top: 15px;
		text-indent: 10px;
		font-size: 18px;
		background-color: #FF8700;
		color: white;
	}

	.n-nav-item {
		width: 100%;
		max-height: 600px;
		padding-left: 10px;
	}

	.n-nav-item ul li {
		height: 40px !important;
		line-height: 40px !important;
	}

	.n-nav-item ul li a:before {
		content: '◆  ';
	}

	.n-nav-item ul li a {
		font-size: 16px !important;
	}

	.grid-left {
		width: 100%;
		height: 650px;
		background-color: white;
		float: right;
		border: 1px solid #DDDDDD;
	}

	.grid-right {
		width: 100%;
		height: 650px;
		background-color: white;
		border: 1px solid #DDDDDD;
	}

	.n-content-title {
		margin: 0 auto;
		width: 80%;
		height: 100px;
		max-height: 120px;
		padding-top: 20px;
		font-size: 25px;
		font-weight: bolder;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.n-content-value {
		width: 100%;
		letter-spacing: 3px;
		line-height: 25px;
	}

	.n-split {
		margin: 0 auto;
		width: 90%;
		background-color: #EDEDED;
		height: 50px;
		line-height: 50px;
	}

	.split-content {
		padding-left: 20px;
	}

	.n-content-value {
		width: 90%;
		max-height: 400px;
		margin: 50px;
		text-indent: 10px;
		font-size: 16px;
		background-color: white;
		overflow-y: auto;
	}

	@media (max-width: 1340px) {
		body {
			min-width: 1340px;
		}
		.noctice {
			width: 1000px;
		}
	}

	@media (min-width: 1700px) {
		body {
			min-width: 1470px;
		}
		.noctice {
			width: 1470px;
		}
	}
</style>
